<!--医院端--退货管理--质检退货订单-->
<template>
  <div class="quality-return-hospital">
    <el-container class="template-box">
      <!-- tab搜索 -->
      <tabs
        class="tabs-part"
        :tabs-arr="indexTabsArr"
        @returnIndex="tabsHandle" />
      <!-- 搜索 -->
      <el-header height="auto">
        <!-- @resetForm="resetForm" -->
        <SearchForm
          label-width="140px"
          :data="indexSearchData"
          @searchForm="searchForm"
          :show-collapse="true"
          :compact-data="searchCompactData"
          :submit-loading='submitLoading'
        />
      </el-header>
      <!-- 列表 -->
      <el-editable
        :data="tableData"
        height="200"
        v-loading="tableLoading"
        :columns="columns">
        <!-- 操作 -->
        <template
          slot="default-action"
          slot-scope="{ row }">
          <el-button
            size="small"
            @click.stop="handleJumpToDetail(row.orderId)"
            type="text">详情</el-button>
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        align="right"
        style="margin-top: 10px;"
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="page.page"
        :page-sizes="PAGE_NUMBER"
        :page-size="page.size"
        :layout="PAGINATION_LAYOUT"
        :total="page.total"
      />
    </el-container>
  </div>
</template>
<script>
import Tabs from '@components/tabs/index.vue'
import ElEditable from '@components/el-editable'
import paginationMixin from '@mixins/paginationMixin'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import { hospitalQualityDetail } from '@const/settlePath'
import { checkReturnHospitalAll } from '@const/beforeSettleApi'
import {
  indexSearchData,
  indexTableColumns as columns,
  indexTabsArr
} from './const'
export default {
  mixins: [paginationMixin],
  components: { ElEditable, SearchForm, Tabs },
  data () {
    return {
      // 搜索标题字段
      indexSearchData,
      searchCompactData: indexSearchData.slice(0, 2),
      // 搜索返回内容
      searchData: {
        typeReturn: 0
      },
      // 表格loading
      tableLoading: false,
      submitLoading: false,
      // 列表数据
      tableData: [],
      // 列表表头
      columns,
      // tab字段
      tabIndex: null,
      indexTabsArr,
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT // 页码功能布局
    }
  },
  created () {
    this.getItems()
  },
  methods: {
    // 获取列表
    getItems (
      page = this.page.page,
      pageSize = this.page.size,
      orderStatus = this.tabIndex
    ) {
      this.submitLoading = true
      this.tableLoading = true
      this.$axios
        .post(checkReturnHospitalAll, {
          ...this.searchData,
          orderStatus,
          page,
          pageSize
        })
        .then(({ data }) => {
          if (Number(data.code)) return
          this.tableData = data.payload.content
        })
        .finally(() => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    // tabs切换处理事件
    tabsHandle (index) {
      this.tabIndex = index
      this.getItems()
    },
    // 跳转详情(根据ID)
    handleJumpToDetail (orderId) {
      this.$router.push({
        path:
          '/hospitalSide/returnOrderManage/qualityReturnList/detail',
        query: { orderId }
      })
    },
    // 搜索功能-点击查询
    searchForm (condition) {
      this.searchData = condition
      this.pageReset()
    }
    // 搜索功能-点击重置
    // resetForm (condition) {
    //   this.searchData = condition
    // }
  }
}
</script>
<style lang="less">
.quality-return-hospital {
  .template-box {
    height: 100%;
    overflow: auto;
  }
}
</style>
